<template>
  <div class="MainToolBar">
    <el-row class="menubar-row">
      <el-col :span="24" class="menubar-col">
        <VisoTopMenu ref="refTopMenu" />
      </el-col>
    </el-row>
    <el-row class="menubar-row">
      <el-col :span="24">
        <div class="Toolbar">
          <el-row>
            <el-col :span="2">
              <el-tooltip class="item" effect="light" content="打开本地文件" placement="top" :show-after=toolTipTime>
                <el-button @click="openLocalFile" size="small" class="el-icon-open" plain></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="light" content="保存到后台" placement="top-start" :show-after=toolTipTime>
                <el-button @click="saveFile()" size="small" plain class="el-icon-save"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="light" content="另存为本地" placement="top-start" :show-after=toolTipTime>
                <el-button @click="saveToLocal()" size="small" plain class="el-icon-saveas"></el-button>
              </el-tooltip>
            </el-col>
            <el-col :span="7.5">
              <div class="bg-purple-dark">
                <el-tooltip class="item" effect="light" content="更改字体" placement="top-start" :show-after=toolTipTime>
                  <el-select v-model="FontFamily" @change="onSelChg($event)" style="width:80px" class="menubar-col">
                    <el-option v-for="item in fontFamilyArr" :key="item.id" :label="item.value" :value="item.id"
                      width="10%">
                    </el-option>
                  </el-select>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="更改字体大小" placement="top-start" :show-after=toolTipTime>
                  <el-select v-model="FontSize" @change="onSelChg($event)" style="width:60px" class="fontsize-select">
                    <el-option v-for="item in fontSizeArr" :key="item.id" :label="item.value" :value="item.id"
                      width="100%">
                    </el-option>
                  </el-select>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="文本水平对齐方式" placement="top-start"
                  :show-after=toolTipTime>
                  <el-select v-model="TextAlign_horn" @change="onSelChg($event)" style="width:60px" class="menubar-col">
                    <el-option v-for="item in hornTextAlignArr" :key="item.id" :label="item.value" :value="item.id"
                      width="10%">
                    </el-option>
                  </el-select>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="文本垂直对齐方式" placement="top-start"
                  :show-after=toolTipTime>
                  <el-select v-model="TextAlign_vert" @change="onSelChg($event)" style="width:60px" class="menubar-col">
                    <el-option v-for="item in vertTextAlignArr" :key="item.id" :label="item.value" :value="item.id"
                      width="10%">
                    </el-option>
                  </el-select>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="字体加粗" placement="top-start" :show-after=toolTipTime>
                  <el-button type="primary" v-model="bold" @click="onTextBtnClick($event, 'font_bold')"
                    class="el-icon-bold"></el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="字体倾斜" placement="top-start" :show-after=toolTipTime>
                  <el-button type="primary" v-model="italic" @click="onTextBtnClick($event, 'font_italic')"
                    class="el-icon-italic"></el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="修改文本颜色" placement="top-start" :show-after=toolTipTime>
                  <el-color-picker v-model="color" show-alpha :predefine="predefineColors" @change="onSelColor($event)">
                  </el-color-picker>
                </el-tooltip>

              </div>
            </el-col>
            <el-col :span="14.5">
              <div class="bg-purple-gray">
                <el-tooltip class="item" effect="light" content="拖动画布移动" placement="top-start"
                  :show-after=toolTipTime>
                  <el-button type="primary" @click="onToolBtnClick($event, 'edit_panView')"
                    class="el-icon-pan"></el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="选择、移动对象、调整对象大小" placement="top-start"
                  :show-after=toolTipTime>
                  <el-button type="primary" @click="onToolBtnClick($event, 'edit_select')"
                    class="el-icon-select"></el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="绘制文本" placement="top-start" :show-after=toolTipTime>
                  <el-button type="primary" @click="onToolBtnClick($event, 'draw_text')"
                    class="el-icon-text"></el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="绘制自由连接线。鼠标左键按下增加折点，右键按下结束绘制" placement="top-start"
                  :show-after=toolTipTime>
                  <el-button type="primary" @click="onToolBtnClick($event, 'draw_polyline')"
                    class="el-icon-polyline"></el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="撤销" placement="top-start" :show-after=toolTipTime>
                  <el-button @click="onToolBtnClick($event, 'edit_undo')" type="primary" plain
                    class="el-icon-undo"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="light" content="重做" placement="top-start" :show-after=toolTipTime>
                  <el-button @click="onToolBtnClick($event, 'edit_redo')" type="primary" plain
                    class="el-icon-redo"></el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="上对齐" placement="top-start" :show-after=toolTipTime>
                  <el-button @click="onToolBtnClick($event, 'align_top')" type="primary" plain
                    class="el-icon-align_top"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="light" content="下对齐" placement="top-start" :show-after=toolTipTime>
                  <el-button @click="onToolBtnClick($event, 'align_bottom')" type="primary" plain
                    class="el-icon-align_bottom"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="light" content="左对齐" placement="top-start" :show-after=toolTipTime>
                  <el-button @click="onToolBtnClick($event, 'align_left')" type="primary" plain
                    class="el-icon-align_left"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="light" content="右对齐" placement="top-start" :show-after=toolTipTime>
                  <el-button @click="onToolBtnClick($event, 'align_right')" type="primary" plain
                    class="el-icon-align_right"></el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="水平中线对齐" placement="top-start" :show-after=toolTipTime>
                  <el-button @click="onToolBtnClick($event, 'align_horn')" type="primary" plain
                    class="el-icon-align_horn"></el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="垂直中线对齐" placement="top-start" :show-after=toolTipTime>
                  <el-button @click="onToolBtnClick($event, 'align_vertical')" type="primary" plain
                    class="el-icon-align_vertical"></el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="水平等间距" placement="top-start" :show-after=toolTipTime>
                  <el-button @click="onToolBtnClick($event, 'align_horn_even')" type="primary" plain
                    class="el-icon-align_horn_even"></el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="垂直等间距" placement="top-start" :show-after=toolTipTime>
                  <el-button @click="onToolBtnClick($event, 'align_vertical_even')" type="primary" plain
                    class="el-icon-align_vertical_even"></el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="等尺寸" placement="top-start" :show-after=toolTipTime>
                  <el-button @click="onToolBtnClick($event, 'align_samesize')" type="primary" plain
                    class="el-icon-align_samesize"></el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="上移一层" placement="top-start" :show-after=toolTipTime>
                  <el-button @click="onToolBtnClick($event, 'lay_up')" type="primary" plain
                    class="el-icon-lay_up"></el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="下移一层" placement="top-start" :show-after=toolTipTime>
                  <el-button @click="onToolBtnClick($event, 'lay_down')" type="primary" plain
                    class="el-icon-lay_down"></el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="置顶" placement="top-start" :show-after=toolTipTime>
                  <el-button @click="onToolBtnClick($event, 'lay_to_top')" type="primary" plain
                    class="el-icon-lay_to_top"></el-button>
                </el-tooltip>

                <el-tooltip class="item" effect="light" content="置底" placement="top-start" :show-after=toolTipTime>
                  <el-button @click="onToolBtnClick($event, 'lay_to_bottom')" type="primary" plain
                    class="el-icon-lay_to_bottom"></el-button>
                </el-tooltip>

              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

import VisoTopMenu from './VisoTopMenu.vue'
import lgxcom from '../../../script/canvas/common/common.js'
import { ElMessageBox } from 'element-plus'
import { ref ,onMounted} from 'vue'

import globalConst from '../../../script/canvas/common/globalConst'
var global = globalConst.GlobalConst;

import utilfuncs from '../../../script/canvas/common/tools/utilfuncs'
var funcs = utilfuncs.UtilFuncs;

import { FileAccessSvc } from '../../../script/manage/service/FileAccessSvc'
import { LocalFileSvc } from '../../../script/manage/service/LocalFileSvc';

import { useStore } from 'vuex';
const store = useStore();

const fontSizeArr = ref([
  { id: 'fontsize@11', value: '11' },
  { id: 'fontsize@12', value: '12' },
  { id: 'fontsize@13', value: '13' },
  { id: 'fontsize@14', value: '14' },
  { id: 'fontsize@16', value: '16' },
  { id: 'fontsize@18', value: '18' },
  { id: 'fontsize@20', value: '20' },
  { id: 'fontsize@24', value: '24' },
  { id: 'fontsize@28', value: '28' },
  { id: 'fontsize@30', value: '30' },
  { id: 'fontsize@36', value: '36' },
  { id: 'fontsize@40', value: '40' },
  { id: 'fontsize@48', value: '48' },
  { id: 'fontsize@52', value: '52' },
  { id: 'fontsize@60', value: '60' },
  { id: 'fontsize@72', value: '72' }
]);

const fontFamilyArr = ref([
  { id: 'fontFamily@宋体', value: '宋体' },
  { id: 'fontFamily@仿宋', value: '仿宋' },
  { id: 'fontFamily@隶书', value: '隶书' },
  { id: 'fontFamily@华文琥珀', value: '华文琥珀' }
]);

const hornTextAlignArr = ref([
  { id: 'textAlign@horn_left', value: '左对齐' },
  { id: 'textAlign@horn_right', value: '右对齐' },
  { id: 'textAlign@horn_mid', value: '水平居中' }
]);

const vertTextAlignArr = ref([
  { id: 'textAlign@vert_top', value: '上对齐' },
  { id: 'textAlign@vert_bottom', value: '下对齐' },
  { id: 'textAlign@vert_mid', value: '垂直居中' }
]);

const refTopMenu = ref(null)
const toolTipTime = ref(1000)
const FontSize = ref(12)
const FontFamily = ref('仿宋')
const TextAlign_horn = ref('textAlign@horn_left')
const TextAlign_vert = ref('textAlign@vert_top')
const color = ref('rgba(255, 69, 0, 0.68)')
const predefineColors = ref(global.sysPreDefColors)
const bold = ref(false)
const italic = ref(false)
const underline = ref(false)
const strikeout = ref(false)

onMounted(() => {
    console.log("viso main toolbar onMounted");
    document.fonts.forEach((font) => {
  console.log(font.family);
});
const allFonts = new Set();
document.fonts.forEach((font) => {
  allFonts.add(font.family);
});

console.log(Array.from(allFonts));
    // window.mainctl.appendSelGraphListner(this);
})

        // this.linespace = GlobalVar.fontInfo.linedspace;        // 行间距
        // this.fontsize = GlobalVar.fontInfo.fontFamily;
        // this.bold = GlobalVar.fontInfo.fontBold;			  // 粗体
        // this.italic = GlobalVar.fontInfo.italic;		  // 倾斜
        // this.underline = GlobalVar.fontInfo.underline;	  // 带下划线
        // this.strikeout = GlobalVar.fontInfo.fontStrikeout;	  // 中间有直线通过的文本

var notifySelGraph = function (mousePoint, list) {
    console.log("mainToolBar act2PickGraphs --------------");
    let pickTextList = [];
    list.forEach(info => {
      if (funcs.mainObjType(info.type) == global.BaseUnitText){
        pickTextList.push(info);
      }
      else{
        //不是文本的，从画布中获取去绑定的文本（如果有）
        let attchLabelTxt = window.mainctl.m_pGetDataINTF.getAttachLabel(info.gid);
        if (attchLabelTxt){
          pickTextList.push(attchLabelTxt);
        }
      }
    });  
    if (pickTextList.length < 1){
      return ;
    }
    let oneTextInfo  = pickTextList[0];
    FontSize.value = oneTextInfo.fontsize.toString();
    FontFamily.value = oneTextInfo.fontFamily;

    TextAlign_horn.value = "textAlign@horn_"+oneTextInfo.alignTypeH;
    TextAlign_vert.value = "textAlign@vert_"+oneTextInfo.alignTypeV;

    bold.value = oneTextInfo.bold;
    italic.value = oneTextInfo.italic;
    underline.value = oneTextInfo.underline;
    strikeout.value = oneTextInfo.strikeout;

    let txtColorObj = new lgxcom.LGXColor();
    txtColorObj.setColorByValue(oneTextInfo.color);
    color.value = txtColorObj.toHexString();
}

var openLocalFile = function () {
  LocalFileSvc.open();
}

var saveToLocal = function () {
  FileAccessSvc.saveToLocal();
}


/**
 * 选取本地文件
 * @param accept
 * @param formatArr
 */

var selectFile = function (accept, formatArr) {
  return new Promise((resolve, reject) => {
    const fileInput = document.createElement('input')
    fileInput.type = 'file';
    fileInput.accept = accept;
    fileInput.click();
    fileInput.onchange = function (event) {
      const file = event.target.files[0]
      if (!formatArr.includes(file.type)) {
        reject({ message: false, event })
      } else {
        resolve({ message: true, event, file })
      }
    }
  });
}



var onSelChg = function (item) {
  console.log("toolbar sel item: " + item);
  let pos = item.indexOf('@');
  var propname = item.substr(0, pos);
  var valLen = item.length - pos - 1;
  var propval = item.substr(pos + 1, valLen);
  var cmd = { propname, propval };
  window.mainctl.m_pEditINTF.modifyGraphStyle(cmd);
}

var onToolBtnClick = function (evt, item) {
  console.log(evt);
  window.canvasManager.sendCMD(item, window.mainctl);
}

var onTextBtnClick = function (evt, item) {
    console.log("onTextBtnClick sel item: " + item);
    var cmd = { propname:'', propval:false };
    if (item == "font_bold"){
      cmd.propname = 'bold';
      bold.value = !bold.value;
      cmd.propval = bold.value;
    }
    else if (item == "font_italic"){
      cmd.propname = 'italic';
      italic.value = !italic.value;
      cmd.propval = italic.value;
    }
    else if (item == "font_underline"){
      cmd.propname = 'underline';
      underline.value = !underline.value;
      cmd.propval = underline.value;
    }
    else if (item == "font_strikeout"){
      cmd.propname = 'strikeout';
      strikeout.value = !strikeout.value;
      cmd.propval = strikeout.value;
    }
    window.mainctl.m_pEditINTF.modifyGraphStyle(cmd);
  }

var onSelColor = function (item) {
  console.log(item);

  let pos1 = item.indexOf('(');
  let pos2 = item.indexOf(')');
  var rgbaStr = item.substr(pos1 + 1, pos2 - pos1 - 1);
  var rgbStrLst = rgbaStr.split(',');
  var lgxColor = new lgxcom.LGXColor();
  lgxColor.red = parseInt(rgbStrLst[0]);
  lgxColor.green = parseInt(rgbStrLst[1]);
  lgxColor.blue = parseInt(rgbStrLst[2]);
  lgxColor.alpha = 255;//parseInt(rgbStrLst[3]);

  var propname = 'fontColor';
  var propval = lgxColor.toValue();
  var cmd = { propname, propval };
  window.mainctl.m_pEditINTF.modifyGraphStyle(cmd);
}

var saveFile = function () {
  FileAccessSvc.saveFile();
}

var updateToolState = function (loginFlag, loginName) {
  refTopMenu.value.login_flag = loginFlag;
  refTopMenu.value.loginName = loginName;
}

defineExpose({
  updateToolState,
  saveToLocal,
  notifySelGraph
});


</script>

<style scoped>
.is-active {
  background-color: blue !important; /* 按下时显示蓝色 */
  color: white !important;
}

/* 头部样式 */
.menubar {
  position: relative;
  line-height: 20px;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: #a69ea1;
}

.fontsize-select {
  position: relative;
  top: 0px;
  left: 0px;
}


.menubar-row {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.MainToolBar {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.menubar-col {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}



.Toolbar {
  position: relative;
  line-height: 30px;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: #b6bdb8;
}

.id_btn_login {
  position: absolute;
  right: 5px;
  bottom: 5px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.bg-purple-dark {
  background: #d4d4d4;
}

.bg-purple-gray {
  background: #d4d4d5;
}

.el-icon-select {
  background: url('@/assets/icon/select.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
  padding-left: 0px;
  margin-left: 0%;
  position: relative;
  top: 0px;
  left: 0px;
}

.el-icon-select:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}


.el-icon-text {
  background: url('@/assets/icon/text.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-text:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}


.el-icon-polyline {
  background: url('@/assets/icon/polyline.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-polylie:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}


.el-icon-copy {
  background: url('@/assets/icon/copy.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-copy:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}


.el-icon-paste {
  background: url('@/assets/icon/paste.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-paste:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}


.el-icon-leftRot {
  background: url('@/assets/icon/leftRot.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-leftRot:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-rightRot {
  background: url('@/assets/icon/rightRot.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-rightRot:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-undo {
  background: url('@/assets/icon/undo.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-undo:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-redo {
  background: url('@/assets/icon/redo.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-redo:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-save {
  background: url('@/assets/icon/save.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-save:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-open {
  background: url('@/assets/icon/open.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-open:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-saveas {
  background: url('@/assets/icon/saveas.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-saveas:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-bold {
  background: url('@/assets/icon/bold.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-bold:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-italic {
  background: url('@/assets/icon/italic.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-italic:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-underline {
  background: url('@/assets/icon/underline.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-underline:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-strikeout {
  background: url('@/assets/icon/strikeout.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-strikeout:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-align_top {
  background: url('@/assets/icon/align_top.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-align_top:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-align_bottom {
  background: url('@/assets/icon/align_bottom.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-align_bottom:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-align_left {
  background: url('@/assets/icon/align_left.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-align_left:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-align_right {
  background: url('@/assets/icon/align_right.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-align_right:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-align_horn {
  background: url('@/assets/icon/align_horn.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-align_horn:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-align_vertical {
  background: url('@/assets/icon/align_vertical.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-align_vertical:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-align_vertical_even {
  background: url('@/assets/icon/align_vertical_even.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-align_vertical_even:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-align_horn_even {
  background: url('@/assets/icon/align_horn_even.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-align_horn_even:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-align_samesize {
  background: url('@/assets/icon/align_samesize.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-align_samesize:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-lay_up {
  background: url('@/assets/icon/lay_up.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-lay_up:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-lay_down {
  background: url('@/assets/icon/lay_down.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-lay_down:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-lay_to_top {
  background: url('@/assets/icon/lay_to_top.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-lay_to_top:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-lay_to_bottom {
  background: url('@/assets/icon/lay_to_bottom.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-lay_to_bottom:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}

.el-icon-pan {
  background: url('@/assets/icon/handCur.png') center no-repeat;
  font-size: 12px;
  background-size: cover;
}

.el-icon-pan:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}
</style>